import React, { memo, useEffect, useState } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { UserFansWrap } from "./style";
import { userFansAction } from "../../store/actionTypes";
import FollowAndFans from "@/components/user/FollowAndFans";
import Pagination from "@/components/pagination";
import DocumentTitle from "react-document-title";

export default memo(function UserFans(props) {
  const id = props.location.search.split("=")[1];
  const [pageStatee, setPageStatee] = useState(1);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(userFansAction(id, 20, (pageStatee - 1) * 20));
  }, [dispatch, pageStatee]); // eslint-disable-line react-hooks/exhaustive-deps
  const { userFansInfo, userDetailInfo } = useSelector(
    (state) => ({
      userFansInfo: state.getIn(["userInfo", "userFansInfo"]),
      userDetailInfo: state.getIn(["userInfo", "userDetailInfo"]),
    }),
    shallowEqual
  );
  const fansInfo = userFansInfo.code == 200 && userFansInfo.followeds;
  const getPagee = (page) => {
    setPageStatee(page);
  };
  return (
    <DocumentTitle title="网易云音乐">
      <UserFansWrap>
        <FollowAndFans
          type={props.location.pathname.split("/")[2]}
          userDetailInfo={userDetailInfo}
          Info={fansInfo}
        />
        {userDetailInfo.length !== 0 ? (
          userDetailInfo.profile.followeds < 20 ? (
            ""
          ) : (
            <Pagination
              page={pageStatee}
              size={20}
              getPage={getPagee}
              total={
                userDetailInfo.length !== 0
                  ? userDetailInfo.profile.followeds
                  : ""
              }
            />
          )
        ) : (
          ""
        )}
      </UserFansWrap>
    </DocumentTitle>
  );
});
